<template>
  <f7-page>
    <div
      style="
        width: 100%;
        padding: calc(20px * var(--ratio)) calc(32px * var(--ratio));
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
      "
    >
      <div class="left">
        <f7-link back
          ><f7-icon f7="chevron_left" style="color: #000"></f7-icon
        ></f7-link>
      </div>
      <div class="title">修改密码</div>
      <div class="right">
        <f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link>
      </div>
    </div>

    <f7-block>
      <qm-field
        label="旧密码"
        placeholder="请输入旧密码"
        type="password"
        clearable
        v-model="oldPassWord"
      >
      </qm-field>

      <qm-field
        label="新密码"
        placeholder="请输入新密码"
        type="password"
        clearable
        v-model="newPassword"
      >
      </qm-field>

      <qm-field
        label="确认密码"
        placeholder="请输入确认密码"
        type="password"
        clearable
        v-model="surePassWord"
      >
      </qm-field>

      <f7-button fill @click="eidt()" class="login-btn">保存</f7-button>
    </f7-block>

    <!-- <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title>修改密码</f7-nav-title>
      <f7-nav-right>
        <f7-link @click="eidt()">保存</f7-link>
      </f7-nav-right>
    </f7-navbar> -->

    <!-- <f7-block-title>旧密码：</f7-block-title>
    <f7-list>
      <f7-list-item>
        <f7-input
          type="password"
          clear-button
          :value="oldPassWord"
          @input="oldPassWord =$event.target.value"
          placeholder="请输入旧密码"
          validate
          required
        ></f7-input>
      </f7-list-item>
    </f7-list>
    <f7-block-title>新密码：</f7-block-title>
    <f7-list>
      <f7-list-item>
        <f7-input
          type="password"
          clear-button
          :value="newPassword"
          @input="newPassword =$event.target.value"
          placeholder="请输入新密码"
          validate
          required
        ></f7-input>
      </f7-list-item>
    </f7-list>
    <f7-block-title>确认密码：</f7-block-title>
    <f7-list>
      <f7-list-item>
        <f7-input
          type="password"
          clear-button
          :value="surePassWord"
          @input="surePassWord =$event.target.value"
          placeholder="请输入确认密码"
          validate
          required
        ></f7-input>
      </f7-list-item>
    </f7-list> -->
  </f7-page>
</template>


<style scoped>
/* >>> .page-content {
  padding: 44px 0 0 !important;
} */
.login-btn {
  /* background: #f58f47;
  border-color: #f58f47; */
  height: 40px;
  line-height: 40px;
  margin: 10px;
  margin-top: 40px;
  border-radius: 4px;
  font-size: 17px;
  color: #ffffff;
}
</style>
<script>
import controller from "../../libs/framework/controller";

export default class instance extends controller {
  disableCache() {
    return true;
  }

  onInit() {
    let user = vue.$f7.data.currentUser;
    this.context.models.userInfo = user;
  }

  mixin() {
    return {
      data() {
        return {
          oldPassWord: null,
          newPassword: null,
          surePassWord: null,
        };
      },
      methods: {
        eidt() {
          if (!this.super.validate()) {
            this.$f7.dialog.toast("请按提示填写必填项");
            return;
          }
          if (this.newPassword != this.surePassWord) {
            this.$f7.dialog.toast("您输入的新密码与确认密码不一致，请重新输入");
            return;
          }
          this.$f7.preloader.show();
          this.$f7.request.postJSON(
            "/api/base/account/changePassword",
            {
              // password: this.$util.md5Encrypt(this.oldPassWord),
              // newPassword: this.$util.md5Encrypt(this.surePassWord),
              // reNewPassword: this.$util.md5Encrypt(this.surePassWord),
              password: this.oldPassWord,
              newPassword: this.surePassWord,
              reNewPassword: this.surePassWord,
            },
            (rlt) => {
              this.$f7.preloader.hide();
              if (rlt.success) {
                this.$f7.dialog.alert("密码修改成功", () => {
                  this.$framework.account.removeUser();
                  this.$framework.redirect.home();
                });
              } else {
                this.$f7.dialog.alert(rlt.message || "密码修改失败");
              }
            }
          );
        },
      },
    };
  }
}
</script>